<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<f:view xmlns="http://www.w3.org/1999/xhtml"
        xmlns:f="http://java.sun.com/jsf/core"
        xmlns:h="http://java.sun.com/jsf/html"
        xmlns:ui="http://java.sun.com/jsf/facelets"
        xmlns:p="http://primefaces.org/ui">    
    <h:head>
        <title> Mapa </title>
        <h:outputScript library="primefaces" name="gmap/gmap.js" />
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript">
            var currentMarker = null;
                var dlg;
                var mapa;
                
                function findMe() {
                    navigator.geolocation.getCurrentPosition(
                    function(position) {
                        var map = mapa.getMap(),
                        latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
                        map.setCenter(latlng);
                        var marker = new google.maps.Marker({
                            position: latlng
                        });
                        marker.setMap(map);
                    },
                    function(error) {
                        alert(error.message);
                    },
                    {
                        enableHighAccuracy: true
                    });
                }
                
            function addDenuncia(event) { 
                if(currentMarker === null) {
//                    document.forms[0].elements[5].value = event.latLng.lat(); 
//                    document.forms[0].elements[6].value = event.latLng.lng(); 
                    document.getElementById('mapa:lat').value = event.latLng.lat(); 
                    document.getElementById('mapa:lng').value = event.latLng.lng();  
                    currentMarker = new google.maps.Marker({  
                        position:new google.maps.LatLng(event.latLng.lat(), event.latLng.lng())  
                    });
                    mapa.addOverlay(currentMarker);  
                    dlg.show();
//                    PF('mapa').addOverlay(currentMarker);                     
//                    PF('dlg').show();  
                }     
            }  
  
            function markerAddComplete() {
                var title = document.getElementById('mapa:title');  
                currentMarker.setTitle(title.value);  
                title.value = "";  
                currentMarker = null;  
                dlg.hide();
//                PF('dlg').hide();  
            }  
  
            function cancel() {  
                dlg.hide();
//                PF('dlg').hide();  
                currentMarker.setMap(null);  
                currentMarker = null;  
                return false;  
            }
        </script>
    </h:head>
    <ui:decorate template="Template.xhtml">
        <ui:define name="centro">

        <h:form id="mapa">
            <p:growl id="messages" showDetail="true" />  

            <p:gmap center="-16.603216, -49.266407" zoom="16" type="HYBRID" 
                    style="width:100%;height:40em;" widgetVar="mapa"
                    model="#{mapBean.mapModel}" streetView="true" 
                    onPointClick="addDenuncia(event);"/>

            <p:dialog widgetVar="dlg" showEffect="fade" closable="false">  
                <h:form prependId="false" id="frm2">  
                    <h:panelGrid columns="2">  
                        <h:outputLabel for="title" value="Título:" />  
                        <p:inputText id="title" value="#{mapBean.titulo}" />  

                        <f:facet name="footer">  
                            <p:commandButton value="Denunciar"   
                                             actionListener="#{mapBean.addMarcador}"   
                                             update=":mapa:messages" oncomplete="markerAddComplete()"/>  
                            <p:commandButton value="Cancelar" onclick="return cancel()"/>  
                        </f:facet>  
                    </h:panelGrid>  

                    <h:inputHidden id="lat" value="#{mapBean.lat}" />  
                    <h:inputHidden id="lng" value="#{mapBean.lng}" />  
                </h:form>  
            </p:dialog>

            <p:commandButton value="Carregar Página 1" onclick="findMe()"/>
        </h:form>
        </ui:define>    
    </ui:decorate>
        

</f:view>